<template>
    <div>
     <h1>房型列表</h1>
     <div>
        房型名称:
        <input type="text" v-model="query.typename"/>
        <input type="button" value="查询" class="btn btn-info" @click="showw"/>
     </div>
     <table class="table table-bordered">
        <tbody>
            <tr>
                <td>Id</td>
                <td>房型名称</td>
                <td>门市价</td>
                <td>可住人数</td>
                <td>可否加床</td>
                <td>房型图片</td>
                <td>房型介绍</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in data.list">
                <td>{{item.typeId}}</td>
                <td>{{item.typeName}}</td>
                <td>￥{{item.price}}</td>
                <td>{{item.peopleNumber}}</td>
                <td>{{item.isBed}}</td>
                <td><img :src="item.typeImg" width="100px" height="70px"></td>
                <td>{{item.desc}}</td>
                <td>
                    <input type="button" value="删除" class="btn btn-danger" @click="del(item.typeId)"/>
                </td>
            </tr>
        </tbody>
     </table>
     <div>
        <span>当前第{{ query.pageIndex }}页/共{{ data.totalPage }}页</span>
        <span>每页{{ query.pageSize }}条/共{{ data.totalCount }}条</span>
        <input type="button" value="首页" @click="Gopage(1)"/>
        <input type="button" value="上一页" @click="Gopage(query.pageIndex-1)"/>
        <span v-for="item in data.totalPage" @click="Gopage(item)">{{ item }}</span>
        <input type="button" value="下一页" @click="Gopage(query.pageIndex+1)"/>
        <input type="button" value="尾页" @click="Gopage(data.totalPage)"/>
     </div>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref,reactive,onMounted } from 'vue';
import { useRoute,useRouter } from 'vue-router';
const router=useRouter();
const route=useRoute();

let query:any=reactive
({
    pageIndex:1,
    pageSize:3,
    typename:''
})

let data:any=reactive
({
    totalCount:'',
    totalPage:'',
    list:[]
})

onMounted(()=>{
    showlist();
})

const showw=()=>
{
    query.pageIndex=1;
    showlist();
}
//显示房型列表
const showlist=()=>
{
    axios
    ({
        url:'/api/Type/ShowType',
        method:'get',
        params:query
    })
    .then(res=>{
        Object.assign(data,res.data);
    })
    .catch(err=>{

    })
}
//分页
const Gopage=(num:any)=>
{
    if(num<1)
    {
        query.pageIndex=1;
        return;
    }
    if(num>data.totalPage)
    {
        query.pageIndex=data.totalPage;
        return;
    }
    query.pageIndex=num;
    showlist();
}

//删除
const del=(id:any)=>
{
    let f=confirm("确认删除吗?")
    {
        if(f)
        {
            axios
            ({
              url:'/api/Type/TypeDelete',
              method:'delete',
              params:
              {
                id:id
              }
            })
            .then(res=>{
              if(res.data>0)
              {
                alert("删除成功");
                showlist();
                return;
              }
              else
              {
                alert("删除失败");
                return;
              }
            })
            .catch(err=>{
          
            })
        }
    }
}

</script>

<style scoped>
span
{
    margin: 0 10px;
}
input
{
    margin: 0 10px;
}
</style>